import React, { useEffect, useState } from 'react'
import { getAdreslist } from '@/utils/adress'
import styles from './index.module.less'
import { NavBar, Button } from 'antd-mobile'

import { FillinOutline } from 'antd-mobile-icons'
import { useNavigate, useSearchParams } from 'react-router-dom'
export interface Datatyp {
    name: string
    phoneNumber: string
    id: string
    defaultStatus: number
}


export default function Adresslist() {
    // 获取路径中的type
    const [serchParms] = useSearchParams()
    const pathName = serchParms.get('type')
    //返回上一页
    const back = () => window.history.back()
    //设置地址列表数据
    const [dataList, setDataList] = useState([{} as Datatyp]
    )
    async function getAdres() {
        let res = await getAdreslist()
        // console.log(res.data);
        setDataList(res.data.items)
    }
    useEffect(() => {
        getAdres()
    }, [])
    //从购物车页面跳转过来之后可以调用该事件，如果是从个人中心页面点进来不可以调用
    function saveAdress(val: string) {
        // console.log(pathName);
        if (pathName === 'select') {
            let adresss = dataList.find(item => item.id === val) as Datatyp
            //地址存到本地
            localStorage.setItem('adress', JSON.stringify(adresss))
            window.history.back()
        }
    }
    const navgite = useNavigate()
    //跳转到修改地址页面
    function gotoAdredit(id: string, val: {}) {
        if (id === 'newAdres') {
            navgite('/my/adresspage/adresedits')
        } else {
            navgite('/my/adresspage/adresedits?id=' + id, {
                replace: false,
                state: val
            })
        }

    }



    //地址栏数据
    const itemns = JSON.stringify(dataList[0]) !== '{ }' && dataList.map((item, index) =>
        <div key={index} className={styles.adressbox}>
            <div onClick={() => saveAdress(item.id)} className={styles.contentLeft}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <div>
                        {item.name}
                    </div>
                    {item.defaultStatus ? <div className={styles.statusOne}>
                        默认
                    </div> : ''}
                </div>
                <div className={styles.phoneNumber}>
                    {item.phoneNumber}
                </div>
            </div>
            <div onClick={() => gotoAdredit(item.id, item)} className={styles.contentRight}>
                <div className={styles.divers}>
                </div>   <FillinOutline />
            </div>
        </div>
    )
    return (

        <div  >
            <NavBar onBack={back} className={styles.topNav}>乐居</NavBar>
            <div className={styles.contents}>
                {itemns}
            </div>
            <div className={styles.subMitbtn}>
                <Button block onClick={() => gotoAdredit('newAdres', '')} className={styles.btnsubMit} color='primary' size='large'>
                    新建地址
                </Button>
            </div>

        </div>
    )
}
